<template>
  <div class="sku-management">
    <div class="header-breadcrumb">
      <Breadcrumb :headerTitle="headerTitle" />
    </div>
    <div class="material-product-title">SKU管理</div>
    <!-- 搜索栏 -->
    <div class="material-product-search">
      <div class="material-product-search-input">
        <el-input
          placeholder="请输入关键词、名称、编号"
          suffix-icon="el-icon-search"
          v-model="keyword"
        >
        </el-input>
      </div>
      <div class="material-product-search-time">
        <el-date-picker
          v-model="timeData"
          type="daterange"
          value-format="yyyy-MM-dd"
          align="right"
          unlink-panels
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :picker-options="pickerOptions"
        >
        </el-date-picker>
      </div>
      <div class="material-product-search-submit">
        <el-button type="primary" @click="getSkuList">搜索</el-button>
      </div>
      <div class="material-product-search-rule">
        <el-button type="primary" @click="isAddEditManagementShow = true"
          >新增SKU</el-button
        >
        <el-button
          type="warning"
          :disabled="skuCheckboxData.length == 0"
          @click="onAllSkuDelete"
          >批量删除</el-button
        >
      </div>
    </div>
    <!-- 数据列表 -->
    <div class="sku-management-table">
      <el-table
        ref="multipleTable"
        :data="skuData"
        tooltip-effect="dark"
        style="width: 100%"
        border
        @selection-change="skuManagementChange"
      >
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column label="SKU规则名称" width="280">
          <template slot-scope="scope">{{ scope.row.rule_name }}</template>
        </el-table-column>
        <el-table-column label="SKU规则">
          <template slot-scope="scope">
            <div class="sku-rule">
              <div class="sku-rule-name">
                母体：<span v-text="scope.row.parent_sku"></span>
              </div>
              <div
                v-if="scope.row.variant_sku == 1"
                class="sku-rule-name"
                v-text="'变体：母体SKU-<color_name>-<size_name>'"
              ></div>
              <div class="sku-rule-name" v-else-if="scope.row.variant_sku == 2">
                变体：母体下按变体顺序从1开始自增
              </div>
              <div class="sku-rule-name" v-else-if="scope.row.variant_sku == 3">
                变体：与母体规则一致
              </div>
              <div class="sku-rule-name">
                简单商品：<span v-text="scope.row.simple_sku"></span>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="address" label="时间">
          <template slot-scope="scope">
            <div class="time-data">
              <span>创建时间: {{ scope.row.created_at }}</span>
              <span>更新时间: {{ scope.row.updated_at }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="address" label="操作" width="160">
          <template slot-scope="scope">
            <el-button type="primary" size="mini" @click="onEditSku(scope.row)"
              >编辑</el-button
            >
            <el-button
              type="success"
              size="mini"
              @click="onSkuDelete(scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 新增SKU -->
    <div class="sku-management-add-edit">
      <el-dialog
        :title="Object.keys(editSku).length ? '编辑SKU' : '新增SKU'"
        :close-on-click-modal="false"
        :visible.sync="isAddEditManagementShow"
        width="45%"
        @closed="onCloseSku"
      >
        <AddEditSku
          ref="addEditSkuRef"
          :editSku="editSku"
          @closeDialogSku="closeDialogSku"
        />
        <span slot="footer" class="dialog-footer">
          <el-button @click="isAddEditManagementShow = false">取 消</el-button>
          <el-button type="primary" @click="onAddEditSkuConfig"
            >保 存</el-button
          >
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import Breadcrumb from '@/components/breadcrumb';
import AddEditSku from './add-edit-sku.vue';
import Sku from '@/api/sku';
import Way from '@/utils/way';
import { MessageBox } from 'element-ui';

export default {
  name: 'skuManagement',
  components: { Breadcrumb, AddEditSku },
  props: {},
  data() {
    return {
      headerTitle: ['管理设置', 'SKU管理'],
      keyword: '', // 关键词
      timeData: '', // 日期
      skuData: [], // 数据列表
      skuCheckboxData: [], // 复选框数据
      skuTotal: 0, // 数据总数
      isAddEditManagementShow: false, // 新增-编辑 弹窗
      page: 1, // 页数
      pageSize: 10, // 条数
      editSku: {}, // 选中的编辑内容
    };
  },
  computed: {
    // 时间快捷选择
    pickerOptions() {
      return this.$store.state.layout.pickerOptions;
    },
  },
  watch: {},
  created() {
    this.getSkuList();
  },
  methods: {
    // 数据列表复选change事件
    skuManagementChange(list) {
      this.skuCheckboxData = list;
    },

    // 批量删除
    onAllSkuDelete() {
      const skuCheckboxData = this.skuCheckboxData;
      const that = this;
      let ids = [];
      skuCheckboxData.forEach((op) => {
        ids.push(op.id);
      });
      MessageBox.confirm(`确定删除选中的SKU?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          Sku.delSkutempInfo({ ids }).then((res) => {
            console.log(res);
            if (res.code == 200) {
              ids.forEach((oj) => {
                const idx = that.skuData.findIndex((op) => op.id == oj);
                that.skuData.splice(idx, 1);
              });
              Way.setMessage('批量删除SKU成功', 1);
            } else {
              Way.setMessage(res.msg, 3);
            }
          });
        })
        .catch(() => {});
    },

    // 获取sku列表
    getSkuList() {
      const that = this;
      const params = {
        page: this.page,
        limit: this.pageSize,
        title: this.keyword,
        start_time: this.timeData[0],
        end_time: this.timeData[1],
      };
      Sku.getSkuTempList(params).then((res) => {
        console.log(res);
        if (res.code == 200) {
          that.skuData = res.data.rows;
        } else {
          Way.setMessage(res.msg, 3);
        }
      });
    },

    // 保存新增或者编辑sku
    onAddEditSkuConfig() {
      this.editSku = {};
      this.$refs.addEditSkuRef.addEditConfig();
    },

    // 关闭前的监听
    onCloseSku() {
      this.editSku = {};
      this.$forceUpdate();
    },

    // sku组件回调函数
    closeDialogSku(isShow) {
      this.isAddEditManagementShow = isShow;
      this.getSkuList();
    },

    // 编辑
    onEditSku(item) {
      this.editSku = item;
      this.isAddEditManagementShow = true;
    },

    // 删除
    onSkuDelete(item) {
      const { id } = item;
      const that = this;
      const idx = this.skuData.findIndex((oj) => oj.id == id);
      MessageBox.confirm(`确定删除【${item.rule_name}】?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          Sku.delSkutempInfo({ id }).then((res) => {
            console.log(res);

            if (res.code == 200 && idx != -1) {
              that.skuData.splice(idx, 1);
              Way.setMessage('删除成功', 1);
            } else {
              Way.setMessage(res.msg, 3);
            }
          });
        })
        .catch(() => {});
    },
  },
  mounted() {},
};
</script>

<style scoped lang="less">
@import '@/style/collect-material-product.less';
// 数据列表
.sku-management-table {
  padding-top: 24px;

  .time-data {
    display: flex;
    flex-direction: column;
  }
}
</style>
